$def with (title=None)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>seddit test bed</title>
	
	<link rel="stylesheet" href="/public/default.css" type="text/css" charset="utf-8">
	<script src="/public/prototype.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" charset="utf-8">
	
	    // lets check for an update every 3 seconds...
	    new PeriodicalExecuter(update_chat, 3);
	
        // all the code within this observer will get loaded as soon
        // as the DOM has been loaded.
        Event.observe(window, 'load', function() {
            update_chat();
            \$('message_content').focus();
            
            Event.observe('submit_message', 'click', send_message); // new message?
            Event.observe('message_content', Event.KEY_RETURN, send_message); // new message?
            
        });
        
        function update_chat() {
            new Ajax.Request('/backend', {
                method: 'get',
                onSuccess: function(transport) {
                    var json = transport.responseText.evalJSON();
                    
                    \$('messages').innerHTML = '';
                    
    				json.messages.message.each(function(message) {
    				    \$('messages').innerHTML += "<div id=\"message" + message.id + "\">";
    				    \$('messages').innerHTML += "[" + message.time + "] " + message.user + ": " + message.text
    				    \$('messages').innerHTML += "</div>"
                    });
                    
                    // clear the dialog
                    \$F('message_content').onFocus(function() {
                        // if already cleared, do nothing
                          if (this._cleared) return

                          // when this code is executed, "this" keyword will in fact be the field itself
                          this.clear()
                          this._cleared = true 
                        
                    });
                    
                    // quick hack to make sure that we scroll to the bottom of the page
                    // when a new message arrives.
                    \$('end').scrollTo();
                },

    			onFailure: function() {
    				console.error("there was an error loading the messages...");
    			}
            });   
        }

        function send_message()
        {
            var message = \$F('message_content');
            console.log(message);
            
            new Ajax.Request('/backend', {
               method: 'post',
               parameters: \$H({author:'drewn', content:\$F('message_content')}),
               
               onSuccess: function(transport) {
                   console.log('posted a new message');
                   update_chat();
               }
                
            });
        }
	   
	</script>
	
</head>
<body>
    <div id="header">
        <h1>chat test bed</h1>
    </div>
    
    <div id="messages">
    </div>


    <div id="bottom">
        <div class="wrapper">
            <div id="chat_functions">
                <input type="hidden" name="author" value="Drew Newberry" id="author">
                <textarea name="message_content" id="message_content" rows="2" cols="40"></textarea>
                <input type="button" name="submit_message" value="Submit" id="submit_message">
            </div>
        </div>
    </div>
    
    <div id="end">&nbsp;</div>


</body>
</html>
